<template>
    <view>
        <cu-custom bgColor="bg-white" :isBack="true">
            <block slot="content">设置收款账户</block>
        </cu-custom>
        <view class="padding">
            <view class="form bg-white radius-lg">
                <view class="box padding-lg">
                    <view class="item crow margin-bottom-xl">
                        <view class="left text-left">收款人</view>
                        <view class="right">
                            <input type="text" placeholder="请输入收款人" v-model="form.name">
                        </view>
                    </view>
                    <view class="item crow margin-bottom-xl">
                        <view class="left text-left">联系电话</view>
                        <view class="right">
                            <input type="tel" placeholder="请输入联系电话" v-model="form.mobile" maxlength="11">
                        </view>
                    </view>
                    <view class="item crow margin-bottom-xl" v-if="['alipay_payment_code','wechat_payment_code'].includes(form.channels)">
                        <view class="left text-left">收款码</view>
                        <view class="right flex justify-center flex-direction" @tap="chooseImage">
					        <image class="qrcode" :src="form.qrcode" mode="" v-if="form.qrcode"></image>
                            <view class="qrcode flex justify-center flex-direction" v-else>
                                <uni-icons type="plusempty" :size="70" color="var(--theme-color)"/>
                            </view>
                        </view>
                    </view>
                    <view class="item crow margin-bottom-xl" v-if="['bank_transfer'].includes(form.channels)">
                        <view class="left text-left">银行卡号</view>
                        <view class="right">
                            <input type="card" placeholder="请输入银行卡号" v-model="account"  @input="formatAccount" maxlength="23">
                        </view>
                    </view>
                    <view class="item crow margin-bottom-xl" v-if="['bank_transfer'].includes(form.channels)">
                        <view class="left text-left">开户行</view>
                        <view class="right">
                            <input type="text" placeholder="请输入开户行" v-model="form.bank">
                        </view>
                    </view>
                </view>

                <view class="padding margin-top-lg" v-if="['wechat_transfer'].includes(form.channels) && !USERINFO.mp_openid && !USERINFO.openid">
                    <view class="flex flex-direction">
                        <view class="cu-btn bg-grey lg round">请先绑定微信</view>
                    </view>
                </view>
                <view class="padding margin-top-lg" v-else>
                    <view class="flex flex-direction">
                        <button class="cu-btn china-btn-bg lg round" @tap="submit">提交</button>
                    </view>
                </view>
            </view>
        </view>
        <loading v-if="pageLoading" />

    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
	computed: {
		...mapState({
			USERINFO: state => state.USER.USERINFO,
		})
	},
    data() {
        return {
            pageLoading: false,
            showMap: false,
            account:'',
            form: {
                channels: '',
                name: '',
                mobile: '',
                qrcode: '',
                account: '',
                bank: ''
            },

        };
    },
    onLoad(options) {
        if (options.channels) {
            this.form.channels = options.channels;
            this.pageLoading = true;
            this.$utils.$api.UserFinanceAccount.index().then(data => {
                for (const key in data) {
                    if(key===options.channels){
                        if (Object.hasOwnProperty.call(data, key)) {
                            this.form = data[key];
                            if(this.form.channels==='bank_transfer'){
                                this.account = this.form.account;
                                this.formatAccount();
                            }
                            break;
                        }
                    }
                }
            }).finally(() => {
                this.pageLoading = false;
            });
        }else{
            uni.showModal({
                title: '提示',
                content: '参数错误',
                showCancel: false,
                success: () => {
                    this.$utils.$page.back();
                }
            });
        }
    },
    methods: {
        formatAccount(){
            let account = this.account.replace(/\D/g, '');
            this.form.account = account;
            // 格式化银行卡号: 4位一空格
            account = account.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, "$1 ");
            this.account = account;
        },
        submit() {
            uni.showLoading({ title: '保存中...' });
            this.$utils.$api.UserFinanceAccount.save(this.form).then(res => {
                uni.hideLoading();
                this.$utils.$message.success(res.msg);
                setTimeout(() => {
                    this.$utils.$page.back();
                }, 1000);
            }).catch(err => {
                uni.hideLoading();
                this.$utils.$message.error(err.msg);
            })
        },
		chooseImage() {
			this.$utils.$api.Upload.chooseImage()
				.then(res => {
					this.form.qrcode = res.data.url
				}).catch(err => {
					this.$utils.$message.error(err.msg);
				})
		},
    }
}
</script>

<style lang="less" scoped>
.box {
    .item {
        width: 100%;

        .left {
            width: 25%;
        }

        .right {
            width: 69%;

            input {
                font-size: 26upx;
            }
            .qrcode{
                background-color: var(--theme-bg-color-light);
                width: 40vw;
                height: 60vw;
            }
        }

        .locationfill {
            font-size: 35upx;
        }
    }
}
</style>
